<template>
  <view class="uni_box home">
    <navbar :title="navbarName" :yin="true">
      <view class="hright" slot="right">
        <image
          class="xiazai"
          src="@/pages_subject/static/img/xiazai.png"
          mode=""
        />
      </view>
    </navbar>
    <view class="content">
      <CcVideo :vid="vidList[idx] || vidList[0]" />
      <view class="sone">
        <view
          class="soneitem"
          :class="!iszi ? 'sactive' : ''"
          @click="iszi = false"
        >
          <text class="ziname">视频列表</text>
          <text class="xian"></text>
        </view>
        <view class="shu"></view>
        <view
          class="soneitem"
          :class="iszi ? 'sactive' : ''"
          @click="iszi = true"
        >
          <text class="ziname">资料下载</text>
          <text class="xian"></text>
        </view>
      </view>
      <view class="slist" v-if="!iszi">
        <view
          class="sitem"
          v-for="(item, index) in videoList"
          :key="index"
          @click="idx = index"
        >
          <image class="bf" src="@/pages_subject/static/img/bf.png" mode="" />
          <view class="sright">
            <text class="vtit">{{ index + 1 }}.{{ item.title }}</text>
            <!-- <text class="vtime">时长：0:30:00</text> -->
          </view>
        </view>
      </view>

      <view class="slist ziview" v-if="iszi">
        <view class="sitemtwo" v-for="(item, index) in fileList" :key="index">
          <image
            class="vgou"
            src="@/pages_subject/static/img/vgou.png"
            mode=""
          />
          <image
            class="vpdf"
            src="@/pages_subject/static/img/vpdf.png"
            mode=""
          />
          <text class="gutit txt">{{ index + 1 }}.{{ item.title }}</text>
        </view>
      </view>

      <view class="botgou" v-if="iszi">
        <image class="vgou" src="@/pages_subject/static/img/vgou.png" mode="" />
        <text class="quan">全选</text>
        <view class="xiazai" style="margin-left: auto">下载</view>
        <view class="quxiao">取消</view>
      </view>
    </view>
  </view>
</template>

<script>
import CcVideo from "../../../components/CcVideo/CcVideo.vue";
export default {
  components: {
    CcVideo,
  },
  data() {
    return {
      info: {
        img: "@/pages_subject/static/img/bobai.png",
        video: "",
      },
      iszi: false,
      navbarName: "",
      videoList: [],
      fileList: [],
      vidList: [
        "A4AC816AE19AAF8A3F35109F9F77F2A8",
        "8BB0FABAB4E66A607E6C9CEE8B422289",
        "15DF048947A205C3FC9558351D509E7C",
        "562F67B290A6EDBC2BBA984E86119800",
      ],
      idx: 0,
    };
  },
  onLoad(options) {
    const { chapterId, videoId, chapterName } = options;
    this.navbarName = chapterName;
    this.getCourseVideoList(Number(chapterId));
    this.getFileList(Number(chapterId));
    this.getVideoDetail(Number(videoId));
  },
  onShow() {},
  methods: {
    // 获取视频列表
    async getCourseVideoList(id) {
      const res = await this.$u.api.courseVideoListGet({ id });
      this.videoList = res;
    },
    // 获取资料
    async getFileList(id) {
      const res = await this.$u.api.courseFileListGet({ id });
      this.fileList = res;
    },
    // 获取播放视频的详情
    async getVideoDetail(id) {
      const res = await this.$u.api.videoDetailRead({ id });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.xiazai {
  width: 27rpx;
  height: 27rpx;
}
.content {
  background-color: #fff;
  padding-bottom: 150rpx;
  .videClass {
    height: 500rpx;
    position: relative;
    width: 100%;
  }
  .sone {
    height: 100rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: 1rpx solid #eeeeee;
    .soneitem {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
      justify-content: center;

      .ziname {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
      }
      .xian {
        position: absolute;
        width: 40%;
        left: 30%;
        bottom: 0;
        height: 4rpx;
        background: linear-gradient(-90deg, #fa4e4e, #fd894f);
        border-radius: 2rpx;
        display: none;
      }
    }
    .sactive {
      .xian {
        display: inline-block;
      }
      .ziname {
        color: rgba(241, 123, 19, 1);
      }
    }
    .shu {
      width: 1rpx;
      height: 38rpx;
      background-color: #cccccc;
      opacity: 0.7;
    }
  }
  .slist {
    .sitem {
      display: flex;
      flex-direction: row;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      align-items: center;
      .vgou {
        width: 26rpx;
        height: 26rpx;
        margin-right: 20rpx;
      }
      .bf {
        width: 20rpx;
        height: 24rpx;
        margin-right: 20rpx;
      }
      .sright {
        flex: 1;
        display: flex;
        flex-direction: column;
        .vtit {
          font-family: PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #333333;
        }
        .vtime {
          margin-top: 13rpx;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 18rpx;
          color: #999999;
        }
      }
    }

    .sitemtwo {
      display: flex;
      flex-direction: row;
      padding: 30rpx;
      border-bottom: 1rpx solid #eee;
      align-items: center;
      .vgou {
        width: 26rpx;
        height: 26rpx;
        margin-right: 50rpx;
      }
      .vpdf {
        width: 20rpx;
        height: 26rpx;
        margin-right: 20rpx;
      }
      .gutit {
        width: 80%;
        display: inline-block;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 26rpx;
        color: #333333;
      }
    }
  }

  .ziview {
  }
}
.botgou {
  position: fixed;
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  background: #ffffff;
  box-shadow: 0rpx 3rpx 18rpx 0rpx #f0f0f0;
  padding: 0 30rpx;
  bottom: 0;
  z-index: 100;
  .vgou {
    width: 26rpx;
    margin-right: 20rpx;
    height: 26rpx;
  }
  .quan {
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #f06103;
  }
  .xiazai {
    margin-left: 50rpx;
    width: 144rpx;
    height: 52rpx;
    background: #f06103;
    border-radius: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
  }
  .quxiao {
    margin-left: 50rpx;
    width: 144rpx;
    height: 52rpx;
    background: #e8433a;
    border-radius: 26rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC;
    font-weight: 500;
    font-size: 26rpx;
    color: #ffffff;
  }
}
</style>
